import {
  AmcaxBaseInputTemplate,
  FeatureManager,
  KEYBOARD_KEY,
  ParameterObjectType,
} from '@amcax/base';
import { BaseInputTemplateProps, getInputProps, RJSFSchema } from '@rjsf/utils';
import { InputNumber, InputNumberProps } from 'antd';
import cx from 'classnames';
import { useFormatInput } from './useFormatInput';
import { forwardRef } from 'react';

export const InputWithFormat = forwardRef<
  HTMLInputElement,
  InputNumberProps & {
    inputType: ParameterObjectType;
    disableParameter?: boolean;
    onDialogVisibleChange?: (visible: boolean) => void;
  }
>((props, ref) => {
  const isUnitEnabled = FeatureManager.isFeatureEnabled('unit');
  const isParameterEnabled = FeatureManager.isFeatureEnabled('cmd-parameter');

  const {
    className,
    inputType,
    disableParameter,
    onDialogVisibleChange,
    ...rest
  } = props;

  const {
    onChangeOuter,
    value,
    onStep,
    onInput,
    step,
    optionRender,
    valueIsExpression,
    showFunctionDialog,
    onBlur,
    onFocus,
  } = useFormatInput({
    inputType,
    outerValue: props?.value,
    onChange: props?.onChange,
    inputProps: props,
    onDialogVisibleChange,
  });

  return (
    <div className={cx('flex items-center gap-2', className)}>
      <InputNumber
        ref={ref}
        changeOnWheel
        {...rest}
        className={cx(rest.classNames, 'w-full', 'input-with-format')}
        disabled={valueIsExpression || showFunctionDialog || rest.disabled}
        onChange={isUnitEnabled ? () => {} : props?.onChange}
        value={isUnitEnabled ? value : props.value}
        onInput={onInput}
        onStep={onStep}
        step={step}
        onBlur={(e) => {
          if (isUnitEnabled) {
            onChangeOuter();
          }
          onBlur();
          rest?.onBlur?.(e);
        }}
        onFocus={onFocus}
        onKeyDown={(e) => {
          props.onKeyDown?.(e);
          if (e.key === KEYBOARD_KEY.ENTER) {
            onChangeOuter();
          }
        }}
      />
      {isParameterEnabled && !disableParameter && optionRender()}
    </div>
  );
});

export const InputWithFormatForForm = (
  props: BaseInputTemplateProps<any, RJSFSchema, any> & {
    unitType: ParameterObjectType;
    disableParameter?: boolean;
  },
) => {
  const { unitType, schema, type, options, disableParameter } = props;
  const inputProps = getInputProps(schema, type, options, false);
  const isUnitEnabled = FeatureManager.isFeatureEnabled('unit');
  const isParameterEnabled = FeatureManager.isFeatureEnabled('cmd-parameter');

  const {
    onChangeOuter,
    value,
    onStep,
    onInput,
    step,
    optionRender,
    valueIsExpression,
    showFunctionDialog,
    onBlur,
    onFocus,
    isEmptyLinkedTable,
  } = useFormatInput({
    inputType: unitType,
    outerValue: props?.value ?? 0,
    onChange: props?.onChange,
    inputProps,
    parameterName: props.name,
  });

  return (
    <div className='flex items-center gap-2'>
      <AmcaxBaseInputTemplate
        {...props}
        value={isUnitEnabled ? value : props.value}
        onChange={isUnitEnabled ? () => {} : props?.onChange}
        numberInputProps={{
          disabled:
            valueIsExpression ||
            showFunctionDialog ||
            props?.disabled ||
            !isEmptyLinkedTable,
          onInput,
          onStep,
          step,
          onBlur: () => {
            onBlur();
            if (isUnitEnabled) {
              onChangeOuter();
            }
          },
          onKeyDown: (e) => {
            if (e.key === KEYBOARD_KEY.ENTER) {
              // 防止submit事件触发
              e.preventDefault();
              onChangeOuter();
            }
          },
          onFocus,
          className: 'input-with-format',
        }}
      />
      {isParameterEnabled && !disableParameter && optionRender(props.disabled)}
    </div>
  );
};
